<!--搜索-->
<template>
  <view class="page-search">
    <view class="search-border-bottom" :class="{shadow:!showHotSearch}">
          <basic-nav-bar 
            class="basic-nav-bar"
            backgroundColor="transparent"
            :statusBar="true"
            :border="false" 
            :fixed="true"
            left-icon="arrowleft" 
            title="搜索"
            :clickLeftBack="false"
            @clickLeft="goBack"
          />
            <basic-search-bar 
              class="basic-search-bar"  
              :placeholder="Number(options.productType)==3 ? '搜索门票':(Number(options.productType)==1 ? '搜索线路' : '搜索景点/线路')"
              radius="40"
              bgColor="#F1F4F9"
              cancelButton="none"
              clearButton="auto"
              fixedPageEl=".page-search"
              @input="handleSearch"
              @focus="handleFocus"
              @blur="handleBlur"
              @confirm="handleConfirm" />
      </view>
    <view class="page-search--content" >
      <!-- 热门搜索 -->
      <hotSearch v-show="showHotSearch && Number(options.productType)!=1 " :options="options"/>
      <!-- 搜索结果列表 -->
      <view :style="contentStyle" v-show="!showHotSearch">
        <basic-loading :isLoading="loading" />           
        <searchList :searchData="searchData" :options="options" :keyword="keyword" :isEmpty="isEmpty || loading"/>     
      </view>
      <!-- 无搜索结果 -->
      <search-empty
        v-show="!showHotSearch && isEmpty "
        emptyWord="没有你要找的内容？换个内容再试试吧！"
        :styles="{
          position: 'absolute',
          top:'50%',
          left:'50%',
          transform:'translate(-50%,-50%)'
        }"/>

      <!-- 安全区 -->
			<basic-safe-area />
    </view>
  </view>
</template>
<script>  
  import sdk from 'sdk'
  import searchList from './components/search-list'
  import hotSearch from './components/hot-search'  
  import searchEmpty from '@/components/business/search-empty'
  import scrollHeaderFixed from '@/components/business/scroll-header-fixed'
  import { searchComposite } from 'api'
  import {decodeQueryObject} from 'utils/helper/query'
  import searchMixin from '@/mixins/search'
  export default {
    components: {searchList, hotSearch, searchEmpty, scrollHeaderFixed},
    name: 'search',
    mixins: [searchMixin],
    data() {
      return {
        showHotSearch: true,
        searchData: {
          categoryPlainInfos: [],
				  productPlainInfos: []
        },
        keyword: '',
        options: {},
        isEmpty: false,
        scrollTop:0,
        contentStyle:{},
        loading: false
      }
    },
    onLoad(query) {
        this.initParams(query)
    },
    mounted(){      
        this.getContentStyle()
    },
    onPageScroll(e) {
      this.scrollTop = e.scrollTop
    },
    methods: {
      initParams(query){
        this.options = decodeQueryObject(query)
        sdk.getSelectCity().then( res => {
          this.options = {...this.options , ...res}
        } )
      },
      handleSearch(val) {
        if(val.value==null){
          this.showHotSearch = true
          this.searchData = {
            categoryPlainInfos: [],
            productPlainInfos: []
          }
          return
        } 
        this.keyword = val.value
        const params = {
          keyword: this.keyword,
          regionId: parseInt(this.options.regionId),
          productType: parseInt(this.options.productType)
        }
        this.isEmpty = false
        this.loading = true
        searchComposite(params).then(res => {
          this.loading = false
          // 搜索结果
          const { categoryPlainInfos, productPlainInfos } = res.result
          this.searchData = res.result
          this.searchData.keyword = this.keyword
          if( categoryPlainInfos.length === 0 && productPlainInfos.length === 0 ) this.isEmpty = true
          else this.isEmpty = false
        })
        // .catch(err=> {
        //   this.loading = false
        // })
      },
      async getContentStyle() {
        let navOffset = await sdk.getOffset('.basic-search-bar')
        let searchOffset = await sdk.getOffset('.basic-nav-bar')

        // 此写法保证布局变更时页面无抖动
        this.contentStyle = `position:absolute;top:${navOffset.height + searchOffset.height}px;bottom:50rpx;left:0;right:0;`
      },
      handleFocus() {
        this.showHotSearch = false
      },
      handleBlur(keyword) {
        // console.log('handleBlur:', document.querySelector('body'))   
        // document.querySelector('body').scrollIntoView(true)
        // sdk.getOffset('.page-search').then(res=>{
        //   console.log('res::', res)
        // })
      },
      handleConfirm(val) {
        const { categoryPlainInfos, productPlainInfos } = this.searchData
        let firstItem = categoryPlainInfos.length > 0 ? categoryPlainInfos[0]: (productPlainInfos.length > 0 ? productPlainInfos[0]: null)
        this.$search_handleClick( firstItem, { ...this.options, keyword : '' } )       
      },
      goBack() {
          sdk.navigateBack()
      }
    }
  }
</script>
<style lang="less">
body {  
  position: relative;
  overflow: hidden;
}

uni-app {
  position: relative;
  overflow: hidden;
}
uni-page {
  position: relative;
  overflow: hidden;
}
/deep/uni-page-wrapper {
  position: relative;
  overflow: hidden;
}
uni-page-wrap {
  position: relative;
  overflow: hidden;
}
uni-page-body{
  position: relative;
  overflow: hidden;
  height: 100vh;
}
.page-search{
  background: #fff;
  // min-height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  // overflow: hidden;
  .search-border-bottom{
    border-bottom: 1px solid #FAFAFA;
  }
  .shadow{ 
      border-bottom: 0;     
      box-shadow: 0 4rpx 16rpx 0 rgba(140, 163, 212, 0.1);
      position: relative;
      z-index: 1000;
  }
  .page-search--content{
    padding: 10rpx @page_horizonal_margin 0;
  }
}


</style>